<template>
    <div class="newsinfo-container">
        <!--大标题-->
        <h3 class="title">{{newsinfo.title}}<!--{{$route.params.id}} 获取id的手段--></h3>
        <!--子标题-->
        <p class="subtitle">
            <span>发表时间：{{newsinfo.add_time | dateFormat}}</span>
            <span>点击：0次{{newsinfo.click}}</span>
        </p>

        <hr>
        <!--内容区-->
        <div class="content" v-html = 'newsinfo.conent'></div>
        <!--评论子组件区-->
            <comment-box :id="this.id"></comment-box>
    </div>
</template>

<script>
    //1.导入子组件
    import comment from'../subcomponents/comment.vue'
    export default {
        data(){
            return{
               //id:this.$route.params.id,  //将url传递多来的id值，挂载到data上，方便以后调用
                /*newsinfo:{}*/
                list:[
                        {id:1,title:"新闻标题",add_time:new Date(),click:1,img_url:"../../images/newsimg1.jpg",
                            conent:`<p>我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我</p>`
                        },
                        {id:2,title:"新闻标题",add_time:new Date(),click:2,img_url:"../../images/newsimg1.jpg"},
                        {id:3,title:"新闻标题",add_time:new Date(),click:3,img_url:"../../images/newsimg1.jpg"},
                        {id:4,title:"新闻标题",add_time:new Date(),click:4,img_url:"../../images/newsimg1.jpg"},
                        {id:5,title:"新闻标题",add_time:new Date(),click:5,img_url:"../../images/newsimg1.jpg"},
                        {id:6,title:"新闻标题",add_time:new Date(),click:6,img_url:"../../images/newsimg1.jpg"},
                        {id:7,title:"新闻标题",add_time:new Date(),click:1,img_url:"../../images/newsimg1.jpg"},
                        {id:8,title:"新闻标题",add_time:new Date(),click:7,img_url:"../../images/newsimg1.jpg"},
                        {id:9,title:"新闻标题",add_time:new Date(),click:8,img_url:"../../images/newsimg1.jpg"},
                        {id:11,title:"新闻标题",add_time:new Date(),click:9,img_url:"../../images/newsimg1.jpg"},
                        {id:12,title:"新闻标题",add_time:new Date(),click:9,img_url:"../../images/newsimg1.jpg"},
                        {id:13,title:"新闻标题",add_time:new Date(),click:9,img_url:"../../images/newsimg1.jpg"},
                        {id:14,title:"新闻标题",add_time:new Date(),click:9,img_url:"../../images/newsimg1.jpg"},
                        {id:15,title:"新闻标题",add_time:new Date(),click:9,img_url:"../../images/newsimg1.jpg"},
                        {id:16,title:"新闻标题",add_time:new Date(),click:9,img_url:"../../images/newsimg1.jpg"},
                        {id:17,title:"新闻标题",add_time:new Date(),click:9,img_url:"../../images/newsimg1.jpg"},
                    ],
                newsinfo:null
            }
        },
        created(){
            this.getNewsInfon()
        },
        methods:{
           /* getNewsInfon(){
                this.$http.get('api/getnew/' + this.id)
                    .then(result=>{
                        if(result.body.status === 0){
                            this.newsinfo = result.body.message[0]
                        }else{
                            Toast("新闻获取失败")
                        }
                })
            }*/
            getNewsInfon(){
                var id = this.$route.params.id;
                this.newsinfo = this.list[id-1];
            }
        },
        components:{  //注册子组件
            'comment-box' : comment
        }
    }
</script>

<style lang="scss">
    .newsinfo-container{
        padding:0 4px;
        .title{
            font-size: 16px;
            text-align: center;
            margin: 15px 0;
            color:red;
        }
        .subtitle{
            font-size: 13px;
            color:#226aff;
            display:flex;
            justify-content: space-between;
        }
        .content{
            img{
                width: 100%;
            }
        }
    }
</style>